<template >
    <van-form @submit="(e:any)=>$emit('onSubmit',e)">
        <div v-for="item in formList" :key="item.name">
            <van-field
                v-if="item.type === 'input'"
                v-bind="item"
                v-model="feilds[item.name]"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />

            <van-field  
                v-if="item.type === 'checkbox'"
                v-bind="item"
            >
                <template #input>
                    <van-checkbox-group  direction="horizontal" v-model="feilds[item.name]">
                        <van-checkbox 
                          v-for="checkboxItem in item.checkboxList" 
                          :name="checkboxItem.value" 
                          shape="square"
                          >{{ checkboxItem.label }}</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>

            <van-field 
                v-if="item.type === 'radio'"
                v-bind="item"
            >
                <template #input>
                    <van-radio-group direction="horizontal" v-model="feilds[item.name]">
                        <van-radio 
                          v-for="radioItem in item.radioList" 
                          :name="radioItem.value"
                        >{{ radioItem.label }}</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field
                v-if="['area','calendar','datetimePicker','picker'].includes(item.type)"
                v-bind="item"
                readonly
                clickable
                v-model="feilds[item.name]"
             />

        </div>

        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>

    </van-form>

</template>

<script lang="ts">
 
export default {
    props:["formList","feilds"],
    emits:["onSubmit"],
    data() {
        return { 
        }
    },
    methods:{ }
}
</script>

<style lang="scss" scoped>

</style>